.utils-box {
    display: inline-block;
    z-index: 1;

    .utils-container {
        box-shadow: 0 0 8px 0 #c5d9e8;
        position: absolute;
        width: 260px;
        /*right: 0;
        top: 38px;*/
        right: -80px;
        top: 0;
        background-color: #fff;
        border-radius: 5px;

        .title {
            height: 44px;
            width: 100%;
            background-color: rgba(32, 31, 37, 0.95);
            text-align: center;
            font-size: 19px;
            color: #fff;
            line-height: 44px;
            position: relative;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;

            .util-icon {
                position: absolute;
                left: 8px;
                top: 6px;
                display: inline-block;
                height: 32px;
                width: 32px;
                line-height: 36px;
                border-radius: 50%;
                background-color: #fff;

                i {
                    color: rgba(16, 16, 16, 1);
                    font-size: 25px;
                }
            }

            .close-btn {
                position: absolute;
                right: 8px;
                color: #fff;
            }
        }

        .map-utils-list {
            overflow-y: auto;
            overflow-x: hidden;

            .item {
                text-align: center;
                width: 25%;
                display: inline-block;
                margin: 18px auto;
                vertical-align: top;

                &:hover {
                    color: #1890FF;
                    transition: ease;
                }

                i {
                    font-size: 25px;
                    display: block;
                }

                span.name {
                    font-size: 14px;
                }
            }
        }

        .util-content {
            border-radius: 5px;
            box-shadow: 0 0 8px 0 #c5d9e8;

            .title {
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                height: 44px;
                font-size: 16px;
                line-height: 44px;
                position: relative;

                .back-btn {
                    position: absolute;
                    left: 8px;
                    color: #fff;
                }

                .close-btn {
                    position: absolute;
                    right: 8px;
                    color: #fff;
                }
            }

            .content-wrapper {
                padding: 8px 8px 16px 8px;
                //height: 644px;
                background-color: #fff;
                overflow-y: auto;

                .line {
                    height: 40px;
                    line-height: 40px;
                    margin-bottom: 8px;

                    .apply {
                        float: left;
                    }

                    .switcher {
                        float: right;
                    }
                }

                .content-sub-wrapper {
                    position: relative;
                    padding: 8px auto;

                    .util-content-overlay {
                        &.visible {
                            position: absolute;
                            z-index: 2;
                            background-color: rgba(0, 0, 0, 0.2);
                            width: 100%;
                            height: calc(100% + 16px);
                        }
                    }

                    .host-wrapper {
                        padding-top: 8px;
                    }
                }
            }
        }
    }

    ::ng-deep .ant-collapse-content > .ant-collapse-content-box {
        padding: 5px;
    }
}
